<template>
    <div class="count-down">
        <div class="circle" :id="'circle'+red_id">
        </div>
        <div class="hint">红包开启中</div>
    </div>
</template>

<script>
// 开包倒计时
import ProgressBar from 'progressbar.js'
export default {
    name: "count-down",
    data () {
        return {
            // 进度条对象
            Progress: null
        }
    },
    props: {
      // 红包id
      red_id:{
          default:0,
      },
      // 进度条总数
      total: {
          type: Number
      },
      // 当前进度条进度
      value: {
          type: Number,
          default:0
      }
    },
    watch: {
        value(value) {
            this.Progress.animate(value / this.total)
        }
    },
    mounted() {
        this.Progress = new ProgressBar.Circle('#circle'+this.red_id,{
            strokeWidth:5,
            color: '#3AADFC'
        })
        this.Progress.animate(this.value)
    }
}
</script>

<style scoped lang="less" src="./count-down.less"></style>
